{extend name="public/base" /}
{block name="style"}
<style>
    /* 表单卡片 */
    .withdraw-form-card {
        background-color: white;
        border-radius: 10px;
        margin: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        overflow: hidden;
    }

    .form-section {
        padding: 15px;
        border-bottom: 1px solid #f5f5f5;
    }
    .form-section:last-child {
        border-bottom: none;
    }
    .section-title {
        font-size: 13px;
        color: #888;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
    }
    .section-title i {
        margin-right: 5px;
        font-size: 14px;
    }

    /* 币种选择 */
    .currency-selector {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 5px;
        scrollbar-width: none; /* 隐藏滚动条 */
    }
    .currency-selector::-webkit-scrollbar {
        display: none;
    }

    .currency-option {
        flex: 0 0 auto;
        padding: 8px 15px;
        border-radius: 6px;
        border: 1px solid #eee;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: all 0.2s;
    }
    .currency-option.selected {
        border-color: #1AAD19;
        background-color: #f0fff4;
        color: #1AAD19;
    }
    .currency-option:active {
        background-color: #f5f5f5;
    }

    .currency-icon {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
        margin-right: 6px;
    }

    .currency-icon { background-color: #fff0f7; color: #E64340; }

    /* 金额输入区 */
    .amount-input-wrap {
        position: relative;
        padding: 10px 0;
    }

    .amount-input {
        width: 100%;
        border: none;
        font-size: 24px;
        color: #333;
        font-weight: 600;
        padding: 5px 0;
        background: transparent;
        outline: none;
    }
    .amount-input::placeholder {
        color: #ccc;
    }


    .amount-input {
        padding-left: 30px; /* 预留符号位置 */
    }

    .balance-info {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
    }
    .balance-info span {
        color: #1AAD19;
    }

    .amount-actions {
        display: flex;
        gap: 8px;
        margin-top: 10px;
    }

    .amount-btn {
        flex: 1;
        padding: 6px 0;
        background-color: #f5f5f5;
        border: none;
        border-radius: 6px;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        transition: all 0.2s;
    }
    .amount-btn:active {
        background-color: #e8e8e8;
    }

    /* 手续费说明 */
    .fee-info {
        background-color: #f0f9f0;
        padding: 10px 12px;
        border-radius: 6px;
        font-size: 12px;
        color: #1AAD19;
        margin-top: 15px;
    }
    .fee-info span {
        color: #333;
    }

    /* 提现地址区域（无输入框，文本展示） */
    .address-section {
        display: none; /* 默认隐藏所有地址区域 */
    }
    .address-section.active {
        display: block; /* 只显示当前币种对应的地址区域 */
    }

    /* 地址文本样式 */
    .address-text {
        padding: 12px 15px;
        background-color: #f9f9f9;
        border-radius: 8px;
        font-size: 15px;
        color: #333;
        word-break: break-all; /* 长地址自动换行 */
        margin-bottom: 10px;
    }

    /* 无地址提示样式 */
    .no-address-hint {
        padding: 12px 15px;
        background-color: #fff7f0;
        border-radius: 8px;
        font-size: 15px;
        color: #FF9F43;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    .no-address-hint i {
        margin-right: 5px;
    }
    .add-address-link {
        color: #1AAD19;
        text-decoration: none;
        margin-left: 5px;
        font-weight: 500;
    }

    .address-hint {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
    }
    .address-hint i {
        margin-right: 3px;
    }
    .edit-address-link {
        color: #1AAD19;
        text-decoration: none;
        margin-left: 5px;
    }

    /* 安全验证区 */
    .password-wrap {
        margin-top: 10px;
    }

    .password-input {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid #eee;
        border-radius: 8px;
        font-size: 15px;
        outline: none;
    }
    .password-input:focus {
        border-color: #1AAD19;
    }

    .password-hint {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
    .password-hint a {
        color: #1AAD19;
        text-decoration: none;
    }
    /* 提示信息 */
    .withdraw-tips {
        margin: 10px;
        padding: 10px 12px;
        background-color: #fff7f0;
        border-radius: 8px;
        font-size: 12px;
        color: #FF9F43;
    }
    .withdraw-tips i {
        margin-right: 5px;
    }
    .customer-service {
        text-align: center;
        margin: 15px 0 20px;
        font-size: 13px;
    }
    .service-link {
        color: #1AAD19;
        text-decoration: none;
    }
</style>


{/block}
<!--主体-->
{block name="content"}

<div class="header">
    <a href="javascript:void(0);" class="back-btn">
        <i class="fa fa-angle-left" style="font-size: 24px;"></i>
    </a>
    <h1 class="header-title">提现</h1>
</div>
<div class='weui-content'>
    <!-- 提现提示 -->
    <div class="withdraw-tips">
        <i class="fa fa-info-circle"></i>
        <span>提现到账时间一般为1-3个工作日，具体以处理时间为准</span><br/>
        <i class="fa fa-info-circle"></i>
        <span>提现币种与充值币种保持一致</span><br/>
        <i class="fa fa-info-circle"></i>
        <span>提现时间每日10:00-21:00</span>
    </div>

    <!-- 提现表单卡片 -->
    <div class="withdraw-form-card">
        <form class="weui-form" id="rechargeForm">
            <!-- 1. 选择币种 -->
            <div class="form-section">
                <div class="section-title">
                    <i class="fa fa-cny"></i> 选择提现币种
                </div>
                <div class="currency-selector">
                    {foreach name="list" item="vo" key='key'}
                        <div class="currency-option"   onclick="wallet('{$vo.id}',this)">
                            <div class="currency-icon">{$vo.coin_name}</div>
                            <span>{$vo.coin_name}</span>
                        </div>
                    {/foreach}
                </div>
            </div>
            <!-- 2. 输入金额 -->
            <div class="form-section">
                <div class="section-title">
                    <i class="fa fa-money"></i> 提现金额
                </div>
                <div class="amount-input-wrap">
                    <input type="number" class="amount-input" name="num" placeholder="请输入金额" min="1" step="1">
                    <div class="balance-info">
                        可用余额: <span id="balanceDisplay">0</span>
                    </div>
                    <div class="amount-actions">
                        <button type="button" class="amount-btn" data-percent="0.2">20%</button>
                        <button type="button" class="amount-btn" data-percent="0.5">50%</button>
                        <button type="button" class="amount-btn" data-percent="0.8">80%</button>
                        <button type="button" class="amount-btn" data-percent="1">全部</button>
                    </div>
                    <!-- 手续费说明 -->
                    <div class="fee-info">
                        <i class="fa fa-info-circle"></i>
                        <span id="feeText"></span>
                    </div>
                </div>
            </div>

            <!-- 3. 提现地址（文本展示，无输入框） -->
            <div class="form-section">
                <div class="section-title">
                    <i class="fa fa-map-marker"></i> 提现地址
                </div>
                <!-- USDT地址内容（有地址示例） -->
                <div class="address-section active" id="address">
                    <div class="address-text"></div>
                </div>
                <!-- BTC地址内容（无地址示例） -->
                <div class="address-section" id="btcAddressSection">
                    <div class="no-address-hint">
                        <i class="fa fa-exclamation-circle"></i>
                        未设置提现地址 <a href="/address-add.html" class="add-address-link" >立即添加</a>
                    </div>
                    <div class="address-hint">
                        <i class="fa fa-info-circle"></i>
                        添加后可直接使用该地址提现
                    </div>
                </div>
            </div>

            <!-- 4. 安全验证（提现密码） -->
            <div class="form-section">
                <div class="section-title">
                    <i class="fa fa-shield"></i> 安全验证
                </div>
                <div class="password-wrap">
                    <input type="password" class="password-input" id="password" placeholder="请输入提现密码">
                    <div class="password-hint">
                        <a href="/set-withdraw-passwd.html">忘记密码？</a>
                    </div>
                </div>
            </div>

            <button type="button" class="weui-btn weui-btn_primary submit-btn" >确认提现</button>
            <div class="customer-service">
                <a href="{$customer_link}" class="service-link">
                    <i class="fa fa-headphones"></i>提现遇到问题？联系客服
                </a>
            </div>
        </form>
    </div>
</div>
{/block}
{block name="script"}
<script>
    const currencyList = JSON.parse('{$list|raw|json_encode}');
    let currencyMap ={};
    currencyList.forEach(record => {
        currencyMap[record.id] = record;
    });
    let amount = 0;
    let coin_id =0;
    let address_id=0;
    let password ="";
    function wallet(id,obj) {
        var that =$(obj);
        coin_id = id;
        $(".amount-input").val("");
        $(".currency-selector").find(".currency-option").removeClass("selected");
        that.addClass("selected");
        $.showLoading();
        $.post("/withdraw-wallet",{coin_id:id},function (res){
            $.hideLoading();
            if (res.code==0) {
                updateWallet(id,res.data);
            } else {
                $.toptip(res.msg,'error');
            }
        },'json')
    }
    $(function (){
       $(".currency-selector").find(".currency-option").eq(0).click();
    });
    function updateWallet(coin_id,data) {
        $("#balanceDisplay").text(data.account_amount);
        amount = data.account_amount;
        address_id = data.address_id;
        $("#feeText").text(currencyMap[coin_id].tip);
        if (data.address_id!=0) {
            $("#btcAddressSection").hide();
            $("#address").text(data.address);
            $("#address").show();
        } else {
            $("#btcAddressSection").show();
            $("#address").hide();
        }
    }
    $(".amount-input").on('input', function() {
        var val = $(this).val();
        val = parseFloat(val);
        if (val>amount) {
            $(this).val(amount);
        }
    });

    $(".amount-btn").click(function (){
        var data = $(this).data("percent")*parseFloat(amount).toFixed(6);
        $(".amount-input").val(data.toString());
    });
    $(".submit-btn").click(function () {
        var coin = currencyMap[coin_id];
        var  num = parseFloat($(".amount-input").val());
        if (!coin||coin==undefined) {
            $.toptip("没有对应的提现币种",'error');
            return;
        }
        password = $("#password").val();
        if (password=="") {
            $.toptip("请输入提现密码",'error');
            return;
        }
        if (num<coin.withdraw_min_num) {
            $.toptip("提现金额不能小于"+coin.withdraw_min_num,'error');
            return;
        }
        if (num>coin.withdraw_max_num) {
            $.toptip("提现金额不能大于"+coin.withdraw_max_num,'error');
            return;
        }
        $.showLoading();
        $.post("/do-withdraw",{coin_id:coin_id,address_id:address_id,num:num,password:password},function (res){
            $.hideLoading();
            if (res.code==0) {
                $.toast("提现申请成功","success",function (){
                    window.location.href="/withdraw-list.html"
                })
            } else {
                $.toptip(res.msg,'error');
            }
        },'json')
    })
</script>
{/block}
